

<template>
  <div class="absolute left-2 top-2 z-10">
    <a-button type="primary" @click="toggleCamera">{{
      currentCamera === web3Dtool.CameraType.PERSPECTIVE
        ? '正交视图'
        : '透视视图'
    }}</a-button>
  </div>
  <canvas ref="canvasRef" class="scene-canvas" />
</template>

<script setup lang="ts">
import * as THREE from 'three';
import * as TWEEN from '@tweenjs/tween.js'
import { useWindowSize } from '@vueuse/core'
const { width, height } = useWindowSize()
import { threeTool, GeometryClass, MaterialClass, RenderClass } from './threeClass'
import { vector3Fun, basicTransformFun, eulerFun, quaternionFun, matrixFun } from './module/vector3'

const canvasRef = ref()
const web3Dtool = new threeTool()
const currentCamera = ref(web3Dtool.currentCamera)

//切换视图模式
const toggleCamera = () => {
  if (web3Dtool.scene) {
    web3Dtool.toggleCamera(curr => {
      currentCamera.value = curr
    })
  } else {
    console.error('Scene not initialized')
  }
}
let box2:any;

onMounted(() => {
  web3Dtool.setCanvasMain({ bgColor: 0x000000, canvasEl: canvasRef.value })
  web3Dtool.initScene()
  // web3Dtool.creatGroup()
  web3Dtool.animateFun()
  const {scene} = web3Dtool
  const activeCamera = web3Dtool.cameras[web3Dtool.currentCamera];


  const geometryMain = new GeometryClass(web3Dtool.scene,false)
  // 1. 创建一个立方体
  // const boxGeo = geometryMain.createBox({width: 2, height: 2, depth: 2, widthSegments: 1, heightSegments: 1, depthSegments: 1})
  // 2. 创建一个球体
  // const sphereGeo = geometryMain.createSphere({radius: 1, widthSegments: 32, heightSegments: 32})
  // 3. 创建一个圆柱体
  // const cylinderGeo = geometryMain.createCylinder({radiusTop: 1, radiusBottom: 1, height: 2, radialSegments: 8})
  // 4. 创建一个圆环
  // const torusGeo = geometryMain.createTorus({radius: 1, tube: 0.4, radialSegments: 8, tubularSegments: 6})
  // 5. 创建一个平面
  // const planeGeo = geometryMain.createPlane({width: 5, height: 5, widthSegments: 1, heightSegments: 1})
  // 6. 创建一个圆环结
  // const torusKnotGeo = geometryMain.createTorusKnot({radius: 0.5, tube: 0.2, tubularSegments: 64, radialSegments: 8})
  // 7. 创建一个二十面体
  // const icosahedronGeo = geometryMain.createIcosahedron({radius: 1, detail: 0})

  const renders = new RenderClass()
  //合并多个集合体为一个几何体
  const merge = renders.mergeGeometry()
  //scene.add(merge)

  const gOperation = renders.geometryOperation()
  //scene.add(gOperation)

  box2 = renders.uvAndNormal3()
  scene.add(box2);

  const box3 = box2.clone()
  box3.position.set(0, 0, 5)
  scene.add(box3)

  const box4 = box2.clone()
  box4.position.set(5, 0, 0)
  scene.add(box4)

  const box5 = box2.clone()
  box5.position.set(-5, 0, 0)
  scene.add(box5)

  //基础变换操作
  basicTransformFun(box2)
  //欧拉角与万向节锁
  eulerFun(box3)


  // boxTween();

  // box4.position.copy(new THREE.Vector3(5, 5, 0));
  // const v3 = new THREE.Vector3(1,1,1).normalize()//normalize向量归一化;
  // console.log("🚀 ~ v3:", v3)
  // box4.translateOnAxis(v3, 5)

  quaternionFun(box4)


  matrixFun(box5)


  const instances = renders.InstantiateRender()
  //scene.add(instances)

  vector3Fun()
})

function boxTween() {
  //创建一段mesh平移的动画
  const tween = new TWEEN.Tween(box2.position); // 初始值
  tween.to({x: 5,y: 0,z: -10}, 1000);// 目标值，毫秒数
  tween.onUpdate(function(obj){
    box2.position.x=obj.x; // x:20
    box2.position.y=obj.y;
    box2.position.z=obj.z;
  }).easing(TWEEN.Easing.Sinusoidal.InOut)
  //tween动画开始执行
  tween.start();

  // box2.translateOnAxis(new THREE.Vector3(1, 1, 1), 3)
  // 渲染循环
  function tweenLoopFun() {
      tween.update();
      requestAnimationFrame(tweenLoopFun);
  }
  tweenLoopFun();
}

// 5. 监听窗口大小变化
watch([width, height], e => {
  web3Dtool.watchUpdate(e[0], e[1])
})
onBeforeUnmount(() => {
  web3Dtool.dispose()
})
</script>

<style scoped>
.scene-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  outline: none;
}
</style>
